<template>
  <view class="live-control-main">
    <view class="live-control-left">
      <view class="change-btn" @tap="handleLive('switch')">
        <image src="/static/images/live/flip.png" class="change-image"></image>
      </view>
    </view>

    <view class="live-control-right">
      <!-- <view class="live-control-right-start" v-if="state === 0" @tap="handlePopup('start', 'open')"> -->
      <view class="live-control-right-start flex items-center justify-center" v-if="state === 0" @tap="goLive">
        <text class="live-control-right-start-text">开始直播</text>
      </view>

      <view class="live-control-right-start" v-if="state == 1" @tap="back()">
        <text class="live-control-right-start-text">关闭直播</text>
      </view>
    </view>

    <!-- 准备直播 -->
    <!-- <view class="live-popup">
      <uni-popup ref="start" type="bottom">
        <view class="live-popup">
          <view class="live-popup-title">
            <text class="live-popup-title-text">准备直播</text>
            <image src="/static/images/close.png" class="live-popup-title-close-text" @tap="handlePopup('start', 'close')"></image>
          </view>
          <scroll-view :show-scrollbar="false" scroll-y="true" class="live-popup-list" :style="{ height: screenHeight * 0.3 + 'px' }">
            <view class="start-list">
              <text class="category-title">直播分类</text>
              <view class="category-box">
                <text
                  v-for="(item, index) in categoryList"
                  :key="index"
                  :class="curCategory === item.id ? 'category-item-active mr60' : 'category-item mr60'"
                  @click="changeCategory(item.id)"
                >
                  {{ item.name || '' }}
                </text>
              </view>
            </view>
          </scroll-view>

          <view class="live-popup-start live-control-right-start" :style="{ bottom: statusFootHeight + 9 + 'px' }" @tap="goLive()">
            <text class="live-control-right-start-text">马上开启直播之旅</text>
          </view>

          <view :style="{ height: statusFootHeight + 'px' }"></view>
        </view>
      </uni-popup>
    </view> -->
  </view>
</template>
<script>
  // import uniPopup from '@/components/uni-popup/uni-popup';

  import sheep from '@/sheep';

  // import {BASE_URL} from '@/env.js'

  export default {
    name: 'LiveFooter',
    props: {
      state: {
        default: 0,
      },
      screenHeight: {
        default: 0,
      },
      screenWidth: {
        default: 0,
      },
      statusFootHeight: {
        default: 0,
      },
    },
    data() {
      return {
        categoryList: [],
        curCategory: 0,
      };
    },
    mounted() {
      this.getCategory();
    },
    methods: {
      async getCategory() {
        let res = await sheep.$api.video.typelist();
        if (res.code === 1) {
          if (res.data.length > 0) {
            this.curCategory = res.data[0].id;
          }
          this.categoryList = res.data;
        } else {
          uni.showToast({ title: res.msg, icon: 'error' });
        }
        // uni.request({
        // 	url: '/live/typelist',
        // 	success: res => {
        // 		res = res.res;
        // 		if(res.code===1){
        // 			if(res.data.length > 0){
        // 				this.curCategory = res.data[0].id;
        // 			}
        // 			this.categoryList = res.data;
        // 		}else{
        // 			uni.showToast({title: res.msg, icon: 'error'});
        // 		}
        // 	}
        // });
      },
      goLive() {
        // if (!this.curCategory) {
        //   uni.$u.toast('请选择直播分类');
        //   return false;
        // }

        this.$emit('handleLive', 'start', { type_id: this.curCategory });
        this.$refs.start.close();
      },
      async handlePopup(type, method) {
        this.$refs[type][method]();
      },
      back() {
        this.$emit('back');
      },
      changeCategory(type) {
        this.curCategory = type;
      },
      handleLive(type) {
        this.$emit('handleLive', type);
      },
    },
  };
</script>

<style>
  .live-control-main {
    padding-top: 18rpx;
    padding-bottom: 18rpx;
    padding-left: 36rpx;
    padding-right: 36rpx;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    display: flex;
  }

  .live-control-left {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-right: 60rpx;
  }

  .live-control-right {
    flex: 1;
  }

  .live-control-right-start {
    display: flex;
    background: #f40;
    align-items: center;
    justify-content: center;
    height: 76rpx;
    border-radius: 40rpx;
  }

  .live-control-right-start-text {
    color: #fff;
    font-size: 30rpx;
  }

  .change-btn {
    width: 80rpx;
    height: 80rpx;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .change-image {
    width: 50rpx;
    height: 50rpx;
  }

  /* 弹框 */
  .live-popup {
    position: relative;
    background: rgba(255, 255, 255, 0.93);
    padding-left: 18rpx;
    padding-right: 18rpx;
    border-top-left-radius: 18rpx;
    border-top-right-radius: 18rpx;
  }
  .live-popup-title {
    height: 100rpx;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .live-popup-title-text {
    font-size: 32rpx;
  }

  .live-popup-title-close-text {
    width: 40rpx;
    height: 40rpx;
  }

  .live-popup-list {
    margin-bottom: 108rpx;
  }

  .live-popup-start {
    position: absolute;
    right: 18rpx;
    left: 18rpx;
  }

  .live-control-right-start {
    background: #f40;
    align-items: center;
    justify-content: center;
    height: 76rpx;
    border-radius: 40rpx;
  }

  .live-control-right-start-text {
    color: #fff;
    font-size: 30rpx;
  }

  .live-control-right-start-text {
    color: #fff;
    font-size: 30rpx;
  }

  .add-photo-image {
    width: 50rpx;
    height: 50rpx;
  }

  .category-box {
    display: flex;
    align-items: center;
    margin-top: 42rpx;
    padding: 0rpx 32rpx;
    flex-direction: row;

    /*#ifdef MP-WEIXIN*/
    margin-top: 10rpx !important;
    /*#endif*/
  }

  .category-item-active {
    width: 200rpx;
    height: 48rpx;
    background: rgba(156, 55, 40, 0.08);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    opacity: 1;
    font-size: 24rpx;
    font-weight: 700;
    color: #9c3728;
    line-height: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    text-align: center;
    line-height: 48rpx;
  }

  .category-item {
    width: 200rpx;
    height: 48rpx;
    background: #f6f7f9;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    opacity: 1;
    font-size: 24rpx;
    font-weight: 400;
    color: #666867;
    line-height: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    text-align: center;
    line-height: 48rpx;
  }

  .mr60 {
    margin-right: 60rpx;
  }

  .category-title {
    font-size: 28rpx;
  }
</style>
